import React, { useState ,useEffect ,useCallback } from 'react';

function useWinSize(){
    const [size,setSize] = useState({
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight
    })

    const onResize = useCallback(()=>{
        setSize({
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        })
        console.log('777')
    },[])
    console.log(typeof onResize)

    useEffect(()=>{
        window.addEventListener('resize',onResize)
        return ()=>{
            window.removeEventListener('resize',onResize)
        }
    },[])

    return size;
}

function Size(){
    const size = useWinSize()
    return(
        <>
            <div>页面Size:{size.width}x{size.height}</div>
        </>
    )
}

export default Size;